<template>
  <el-menu
    router
    :default-active="$route.path"
    background-color="#304156"
    text-color="#AFBBCA"
    active-text-color="#43ABFF"
  >
    <el-menu-item index="/dashboard/home">
      <i class="el-icon-s-home"></i>
      <span>首页</span>
    </el-menu-item>
    <el-submenu index="2">
      <template v-slot:title>
        <i class="el-icon-s-management"></i>
        <span>学科管理</span>
      </template>
      <el-menu-item index="/dashboard/subject">
        <span>学科列表</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/subject/add">
        <span>添加学科</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template v-slot:title>
        <i class="el-icon-document-copy"></i>
        <span>试卷管理</span>
      </template>
      <el-menu-item index="/dashboard/examPaper">
        <span>试卷列表</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/examPaper/add">
        <span>添加试卷</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template v-slot:title>
        <i class="el-icon-tickets"></i>
        <span>题目管理</span>
      </template>
      <el-menu-item index="/dashboard/question">
        <span>题目列表</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/question/single">
        <span>单选题创建</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/question/multiple">
        <span>多选题创建</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/question/judgement">
        <span>判断题创建</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/question/blank">
        <span>填空题创建</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/question/short">
        <span>简答题创建</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="5">
      <template v-slot:title>
        <i class="el-icon-document-checked"></i>
        <span>答卷管理</span>
      </template>
      <el-menu-item index="/dashboard/answerPaper/doing">
        <span>批改列表</span>
      </el-menu-item>
      <el-menu-item index="/dashboard/answerPaper/done">
        <span>批改完成</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      menuItem: []
    }
  },
}
</script>

<style scoped>
.el-menu {
  display: flex;
  flex-direction: column;
  border: none;
}

.el-menu--inline .el-menu-item {
  background-color: #1f2d3d !important;
}
</style>